<template>
  <div>
    <NavBar />
    <div class="page-container">
      <h1>List 页</h1>
      <h2>一、页面进出场动画</h2>
      <h3>测试：</h3>
      <p>
        1. 测试保持滚动位置：List -> Article1 ->
        Article2，再依次回退，可以看到滚动位置全部保持。注意先任意滚动页面再点击按钮。<br />
        <button @click="$router.push({ name: 'Article', query: { id: 1 }, params: { keepScrollY: true } })">
          去Article1页
        </button>
      </p>
      <p>
        2. 测试不保持滚动位置：List -> Article1 ->
        Article2，再依次回退，可以看到滚动位置全部保持。注意先任意滚动页面再点击按钮。<br />
        <button @click="$router.push({ name: 'Article', query: { id: 1 } })">去Article1页</button>
      </p>
      <h2>二、动态keep-alive</h2>
      <p>先随意输入字符，再去Article1或者返回首页，然后再回到本页，注意观察输入框文字是否缓存。</p>
      <van-cell-group>
        <van-field v-model="value" label="文本" placeholder="输入" />
      </van-cell-group>
      <h2>三、实现：“第一次回退先关弹层”，“第二次回退真正回退”</h2>
      <h3>测试</h3>
      <p>1. 点出弹出层</p>
      <button @click="popupShow = true">点击弹出一个层</button>
      <p>2. 点击浏览器后退按钮，你会发现浏览器并没有回退，只是层消失了。</p>
      <div style="height: 100px"></div>
    </div>
    <div v-if="popupShow" class="popup" @click="popupShow = false"></div>
  </div>
</template>

<script>
// 给beforeRouteEnter提供store对象。因为这个周期内this无法指向Vue实例
import store from '@/store';
import NavBar from '@/components/NavBar.vue';
export default {
  name: 'List',
  components: {
    NavBar,
  },
  data() {
    return {
      value: '',
      popupShow: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'Home') {
      store.commit('ADD_CACHED_VIEWS', 'List');
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 仅适用于本页面不作为H5着陆页的情况
    if (this.popupShow) {
      this.popupShow = false;
      const scrollTop = document.documentElement.scrollTop;
      next(false);
      setTimeout(() => {
        document.documentElement.scrollTop = scrollTop;
      });
      return;
    }

    if (to.name === 'Home') {
      this.$store.commit('DEL_CACHED_VIEWS', 'List');
    }
    next();
  },
};
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 60vw;
  height: 60vh;
  background-color: green;
}
</style>
